<template>
  <div class="bottom-nav-group">
    <template v-for="(item,index) of navList" >
      <div class="nav-item" v-if="showNav.includes(index)" :key="item.event">
        <!-- 背景 -->
        <div
          class="nav-bg"
          :class="{'is-active': item.active == isActive ? true:false}"
          @click="selectNav(item)"
        >
          <!-- 文字 -->
          <div
            class="nav-icon"
            :style="{ background: 'url(' + getUrl(item)  + ') no-repeat top left / 100% 100%' }"
          ></div>
          <div class="nav-text">{{item.label}}</div>
        </div>
      </div>
    </template>
  </div>
</template>
<script>
export default {
  props: {
    active: [String, Number],
    routeData: [String, Number],
    routeMatched: [String],
    showNav: {
      type: Array,
      default() {
        return [0,1,2,3]
      }
    }
  },
  data() {
    return {
      isActive: 0,
      isRoute: null,
      isRouteMatched: null,
      navList: [
        {
          icon: require("@/assets/layout/nav/monitor.png"),
          iconActive: require("@/assets/layout/nav/monitor-a.png"),
          event: "monitor",
          to: "",
          label: "实时监测",
          active: 0
        },
        {
          icon: require("@/assets/layout/nav/warn.png"),
          iconActive: require("@/assets/layout/nav/warn-a.png"),
          event: "warn",
          to: "",
          label: "异常记录",
          active: 1
        },
        {
          icon: require("@/assets/layout/nav/total.png"),
          iconActive: require("@/assets/layout/nav/total-a.png"),
          event: "total",
          to: "",
          label: "统计分析",
          active: 2
        },
        {
          icon: require("@/assets/layout/nav/device.png"),
          iconActive: require("@/assets/layout/nav/device-a.png"),
          event: "device",
          to: "",
          label: "设备管理",
          active: 3
        }
      ]
    };
  },
  created() {
    this.isActive = this.active;
    this.isRoute = this.routeData;
    this.isRouteMatched = this.routeMatched;
  },
  methods: {
    getUrl(item) {
      if (item.active == this.isActive) {
        return item.iconActive;
      } else {
        return item.icon;
      }
    },
    selectNav(item) {
      let _this = this;
      this.navList.forEach(item1 => {
        if (item === item1) {
          _this.isActive = item.active;
          if (item.active == 0) {
            this.$router.push({
              path: `${_this.isRouteMatched}/realtimeMonit/${_this.isRoute}`
            });
          } else if (item.active == 1) {
            this.$router.push({
              path: `${_this.isRouteMatched}/exceptionRecord/${_this.isRoute}`
            });
          } else if (item.active == 2) {
            this.$router.push({
              path: `${_this.isRouteMatched}/statisticAnly/${_this.isRoute}`
            });
          } else if (item.active == 3) {
            this.$router.push({
              path: `${_this.isRouteMatched}/fireDeviceManger/${_this.isRoute}`
            });
          }
        }
      });

      // this.$router.push({path: "/realtimeMonit", params: {id:'1'}})

      this.$emit("change", item.event);
    }
  },
  watch: {
    active(val) {
      this.isActive = val;
    },
    routeData(val) {
      this.isRoute = val;
    }
  }
};
</script>
<style scoped lang="scss">
.bottom-nav-group {
  position: fixed;
  bottom: 25px;
  left: 30%;
  display: flex;
  // justify-content: center;

  .nav-item {
    width: 129px;
    height: 165px;
    margin-right: 18px;
  }

  .nav-bg {
    background: url("~@/assets/layout/nav/nav.png") no-repeat top left / 100%
      100%;
    width: 100%;
    height: 100%;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: ease all 0.3s;
    // justify-content: center;

    &:hover {
      margin-top: -3px;
    }

    &.is-active {
      background: url("~@/assets/layout/nav/nav-a.png") no-repeat top left /
        100% 100%;
    }

    .nav-icon {
      background: blue;
      width: 52px;
      height: 52px;
      margin-top: 44px;
      transition: ease all 0.3s;
    }

    .nav-text {
      margin-top: 12px;
      font-size: 14px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 0;
      letter-spacing: 0px;
      color: #e9fbff;
    }
  }
}
</style>